設計

需要調整圖片來源

• 介面功能說明：原本寫在去年的 【Day 34】集郵冊：郵票打版，用幾個 Stack 裝載圖片和文字，不過裡面的資料實際上還是假資料，不是從資料庫裡面拿到的，反而是寫死在程式碼中。
• 而那些魚的圖片，當初暫時寄放在 Assets.xcassets 裏面
  
• 但是我們希望呈現的是，使用者可以在畫面中顯示自己抓到的魚，而不是開發者擺進來的圖案。
• 這邊需要依序調查開發出下列程式
  • 「從 Amplify DataStore 拿回圖片的路徑」，只是一堆字串，單純的
  • 「AsyncImage」 將圖片載入畫面；或者是走 Amplify Storage 的方法下載回圖檔，放在指定路徑。兩種做法我都覺得很直覺。
  • 「如果沒有連上網路，那該如何處理」

調整新增郵票按鈕位置

• 原本的作法，是在列出既有郵票後，在尾端加入一個空白 Stack，如這邊程式碼

  ZStack{ // 跳出新增郵票框框
      Rectangle()  // 底部是個方塊
          .frame(width: 180, height: 250)
          .foregroundColor(.gray)
          .cornerRadius(10)
      VStack {
          Image(uiImage: newStampPhoto)
              .resizable()
              .frame(width: 80, height: 80)
      }
      Button(action: createStamp) {
          Label("", systemImage: "plus.rectangle.on.folder.fill")
          .labelStyle(.iconOnly)
          .frame(width: 40, height:40)
          .foregroundColor(.white)
          .background(Color.black)
          .cornerRadius(15)
          .padding(5)
          .onTapGesture {
              self.addStampAlertIsPresented = true
              // self.showPhotoOptions.toggle()
              self.createStamp()
          }
      }
  }
  

• 但今天想了一想，那一塊只是為了要做一個「加入」的動作、呼叫函式跳出泡泡框，可以直接把按鈕拉到邊緣，如此在呈現郵冊的時候迴圈會相對單純好看。
  

郵票本身

• 因為每個人都可以使用魚的名字，上傳圖片，所以這裡面的資料要去查表
• 載入畫面時：把表格裡面所持有的魚名和連結拿回來
• 點選新增圖片時：打開相機拍張照
• 點選上傳/同步相簿：（判斷 Stamps 陣列新增的部分）將新內容推送上雲

讀取相片

    VStack {
        ... 省略
    }
    .actionSheet(isPresented: $showPhotoOptions) {
        ActionSheet(title: Text("選擇相片來源"),
                    message: nil,
                    buttons: [
                        .default(Text("相機")) {
                            self.photoSource = .camera
                        },
                        .default(Text("照片")) {
                            self.photoSource = .photoLibrary
                        },
                        .cancel(Text("取消"))
                    ])
    }
    .fullScreenCover(item: $photoSource) { source in
        switch source {
        case .photoLibrary: ImagePicker(sourceType: .photoLibrary, selectedImage: $newStampPhoto).ignoresSafeArea()
        case .camera: ImagePicker(sourceType: .camera, selectedImage: $newStampPhoto).ignoresSafeArea()
        }
    }

備註

• 使用 Assets
  1. 寫：製作程式時，放入 Assets.xcassets (只能在製作程式的時候放進去，程式不能寫資料進來)
  2. 讀：直接由 Image("圖檔名字") 取用
• 相片五部曲
  1. 拍照或讀取照相簿 ImagePicker 至 UIImage
  2. UIImage 至 離線 PNG 檔案
  3. 離線 PNG 檔案 至 Image
  4. 離線 PNG 檔案 至 S3
  5. S3 至 離線 PNG 檔案